<template>
    <div class="box-store" id="1">
        <head-go></head-go>
        <div class="store-List" >
            <div class="search">
                <el-input placeholder="搜索一下" v-model="input">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <div class="kinds">
                    <span class="kinds-name">美食</span>
                    <a href="#2" class="all" >全部</a>
                    <ul>
                        <ol v-for="(item,index) in food" :key="index" @click="currentIndex=index" :class="{'typeActive':currentIndex==index}">{{item}}</ol>
                    </ul>
                </div>
                <div class="kinds">
                    <span class="kinds-name">药类</span>
                    <a href="#2" class="all">全部</a>
                    <ul>
                        <ol v-for="(item,index) in medicine" :key="index" @click="currentIndex1=index" :class="{'typeActive':currentIndex1==index}">{{item}}</ol>
                    </ul>
                </div>
                <div class="kinds">
                    <span class="kinds-name">超市</span>
                    <a href="#2" class="all">全部</a>
                    <ul>
                        <ol v-for="(item,index) in suppermarket" :key="index" @click="currentIndex2=index" :class="{'typeActive':currentIndex2==index}">{{item}}</ol>
                    </ul>
                </div>
            </div>
            <div class="car" @click="goUrlShopping()"><i class="el-icon-shopping-cart-2"></i>我的购物车</div>
        </div>
        <div class="shop"id="2">
            <el-tabs type="border-card">
                <el-tab-pane label="默认推荐">
                    <div class="shoplist">
                        <div class="shopimg" v-for="(item,index) in stores" :key="index" @click="goUrlStorePage(index)">
                            <img :src="require('@/'+item.src)" height="200" width="350"/>
                            <div class="shoparea" >
                                <p class="shopname">{{item.name}}</p>
                                <p class="plun">
                                    <template v-for="(value,i) in item.starArr">
                                        <template v-if="i==0  && value>0">
                                            <span  class="iconfont icon-star-full" v-for="idx of value"></span>
                                        </template>
                                        <span  class="iconfont icon-star-half" v-if="i==1 && value>0"></span>
                                    </template>
                                    <span class="pl">{{item.pl}}条评论</span><el-divider direction="vertical"></el-divider><span class="sell">月售{{item.sell}}</span>
                                <p class="average">人均：<span class="money">￥{{item.money}}</span><span class="place"><i class="el-icon-location-information"></i> {{item.place}}</span></p>
                                <p class="describe"><span>{{item.describe}}</span><span>{{item.describe1}}</span><span>{{item.describe2}}</span></p>
                                <div class="line"></div>
                            </div>
                        </div>
                    </div>
                    <div class="more">查看更多<i class="el-icon-caret-right"></i> </div>
                </el-tab-pane>
                <el-tab-pane label="猜你喜欢">
                    <div class="shoplist">
                        <div class="shopimg" v-for="(item,index) in stores" :key="index" @click="goUrlStorePage(index)">
                            <img :src="require('@/'+item.src)" height="200" width="350"/>
                            <div class="shoparea" >
                                <p class="shopname">{{item.name}}</p>
                                <p class="plun">
                                    <template v-for="(value,i) in item.starArr">
                                        <template v-if="i==0  && value>0">
                                            <span  class="iconfont icon-star-full" v-for="idx of value"></span>
                                        </template>
                                        <span  class="iconfont icon-star-half" v-if="i==1 && value>0"></span>
                                    </template>
                                    <span class="pl">{{item.pl}}条评论</span><el-divider direction="vertical"></el-divider><span class="sell">月售{{item.sell}}</span>
                                <p class="average">人均：<span class="money">￥{{item.money}}</span><span class="place"><i class="el-icon-location-information"></i> {{item.place}}</span></p>
                                <p class="describe"><span>{{item.describe}}</span><span>{{item.describe1}}</span><span>{{item.describe2}}</span></p>
                                <div class="line"></div>
                            </div>
                        </div>

                    </div>
                    <div class="more">查看更多<i class="el-icon-caret-right"></i> </div>
                </el-tab-pane>
                <el-tab-pane label="药类">
                    <div class="medicine-list" v-for="(md,index) in medicines" :key="index">
                        <p>{{index}}</p>
                        <div class="kind-med">
                            <div class="m-img" v-for="(item,index1) in md" :key="index1" @click="goUrlMedicinePage(index,index1)">
                                <img :src="require('@/'+item.img)" height="80" width="100"/>
                                <p>{{item.gnname}}</p>
                                <p>￥<span>{{item.gmprice}}</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="more">查看更多<i class="el-icon-caret-right"></i> </div>
                </el-tab-pane>
                <el-tab-pane label="超市">
                   <div class="supper-maidx">
                       <div class="f-supper" v-for="(sp,index) in suppermarkets" :key="index" >
                           <p class="title-supper">{{index}}</p>
                           <el-carousel height="290px" >
                               <el-carousel-item v-for="(item,index1) in sp" :key="index1" >
                                   <img :src="require('@/'+item.src)" width="275px" height="200px" @click="goUrlSuppermarketPage(index,index1)"/>
                                   <p>{{item.fname}}</p>
                                   <span style="color: red">￥{{item.fprice}}</span><span style="font-size: 12px;color: red" v-show="item.fyprice.length!=0"><del>￥{{item.fyprice}}</del></span>
                               </el-carousel-item>
                           </el-carousel>
                       </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <back-head></back-head>
    </div>
</template>
<script>
    import StoreData from "@/assets/data/storePage.json";
    import HeadGo from "@/components/HeadGo";
    import BackHead from "@/components/BackHead";
    export default {
        name: "storeView",
        components:{
            HeadGo,
            BackHead,
        },
        data(){
            return{
                stores:StoreData.store,
                medicines:StoreData.medicines,
                suppermarkets:StoreData.suppermarkets,
                input:'',
                currentIndex:'',
                currentIndex1:'',
                currentIndex2:'',
                food:['蛋糕甜品','火锅','日韩料理','东北菜','川湘菜','江浙菜','粤菜','西北菜','咖啡奶茶','京菜鲁菜','云贵菜','其他'],
                medicine:['感冒发烧','亲热解读','慢性疾病','儿童用药','肠胃用药','皮肤用药 ','咳嗽哮喘','风湿骨痛','个人护理','其他'],
                suppermarket:['水果','零食','生活用品','生鲜/菜市场'],
            }
        },
        methods:{
            change2(){
                this.currentIndex2=index;
            },
            change1(){
                this.currentIndex1=index;
            },
            change(){
                this.currentIndex=index;
            },
            goUrlShopping(){
                this.$router.push({path: '/shopping'})
            },
            goUrlStorePage(store_id){
                this.$router.push({path:`/storepage/${store_id}`})
            },
            goUrlMedicinePage(medicine_id,medicine_id1){
                this.$router.push({path:`/medicine/${medicine_id}/${medicine_id1}`})
            },
            goUrlSuppermarketPage(suppermarket_id,suppermarket_id1){
                this.$router.push({path:`/suppermarket/${suppermarket_id}/${suppermarket_id1}`})
            },
            setStar(stores){
                stores.forEach((item,key)=>{
                    //console.log(item.star,key)
                    if(item.star % 1==0){
                        this.stores[key].starArr=[item.star,0.5-item.star]
                    }else{
                        this.stores[key].starArr=[parseInt(item.star),1,4-parseInt(item.star)]
                    }
                })
            }
        },
        created() {
            this.setStar(this.stores)
        }
    }
</script>

<style scoped>
    .car{
        float: right;
       /* border: 1px solid black;*/
        margin-right: 50px;
        font-size: 14px;
        color: #056da1;
    }
    .car i{
        font-size: 27px;
        margin-right: 5px;
    }
    .box-store{
        height: 250vh;
        background: #f8f8f8;
    }
    .store-List{
        background: white;
        width: 800px;
        height: 400px;
        border-radius: 10px;
        margin: 20px auto;
        border: 1px solid #007bff;
    }
    .search{
        width: 330px;
        margin: 0 auto;
    }
    .kinds-name{
        width: 100px;
        height: 30px;
        font-size: 20px;
    }
    .kinds{
        float: left;
        margin: 20px 0 5px -220px;
        width: 800px;
        height: 70px;
    }
    .kinds .all{
        display: inline-block;
        text-decoration: none;
        border-radius: 6px;
        width: 80px;
        height: 30px;
        line-height: 30px;
        margin-left: 20px;
        color: #2c3e50;
    }
    .kinds ul{
        margin-top: -32px;
        margin-left: 100px;
    }
    .kinds ol {
        text-align: center;
        list-style: none;
        height: 30px;
        width: 80px;
        float: left;
        font-size: 14px;
        line-height: 30px;
        margin: 5px 15px;
        border-radius: 10px;
    }
    .typeActive{
        background: #0085d0;
        color: white;
    }
    .el-input{
        margin-top: 30px;
    }
    .shop{
        width: 1000px;
        height: 800px;
        margin-left: 200px;
        margin-top: 30px;
        //border: 1px solid black;
    }
    .shoplist{
        height: 200px;
        width: 100%;
        //border: 1px solid black;
        text-align: left;
        margin: 20px 0;
       /* display: flex;*/
    }
    .shoplist img{
        float: left;
        //border: 1px solid black;
        height: 180px;
    }
    .shoparea{
       /* border: 1px solid black;*/
        float: left;
        width: 600px;
        height: 200px;

    }
    .supper-maidx{
        text-align: center;
    }
    .shopname{
        font-size: 20px;
        font-weight: bold;
        padding: 20px;
    }
    .plun{
       /*// border: 1px solid black;*/
        width: 500px;
        margin-left: 20px;
    }
    .iconfont{
        color: orange;
    }
    .pl{
        margin-left: 10px;
        color: #6a6868;
        font-size: 12px;
    }
    .sell{
        color: #6a6868;
        font-size: 12px;
    }
    .average{
        margin:15px  20px;
    }
    .money{
        color: #ff4800;
        font-size: 24px;
    }
    .place{
        margin:15px  20px;
        color: #6a6868;
        font-size: 13px;
    }
    .more{
        /*border: 1px solid black;*/
        width: 100px;
        float: right;
        color: #0085d0;
    }
    .describe p{
        text-align: left;
    }
    .describe span{
        margin-left: 20px;
        font-size: 13px;
        color: #f86060;
        background: #facaca;
        border-radius: 2px;
    }
    .line{
        width: 500px;
        height: 1px;
        border-top:1px solid #726f6f;
        margin-top: 15px;
        margin-left: 20px;
    }
    .medicine-list{
        text-align: left;
    }
    .kind-med{
        height: 130px;
        //border: 1px solid black;
        margin-bottom: 20px;
        display: flex;
    }
    .m-img{
        width: 100px;
        font-size: 12px;
        background: #f8f8f8;
        border-radius: 10px;
        flex: 1;
        margin: 0 20px;
        float: left;
    }
    .m-img img{
        margin-left: 10px ;
    }
    .f-supper{
        float: left;
        background: #f8f8f8;
        border-radius: 10px;
       /* border: 1px solid black;*/
        width: 300px;
        height: 300px;
        margin: 10px ;
    }
    .title-supper{
        margin:5px 0  18px 0;
        font-weight: bold;
    }
</style>